<template>
  <div class="home-grid">
    <van-grid :column-num="5" square :gutter="5">
      <van-grid-item v-for="list in menulist" :key="list">
        <van-image :src="list.url"/>
        <span>{{ list.text }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'

const menulist = [
  {text:'今日爆款',url:menu1},
  {text:'好物分享',url:menu2},
  {text:'推荐购买',url:menu3},
  {text:'购物心得',url:menu4},
  {text:'直播专区',url:menu5},
  {text:'签到中心',url:menu6},
  {text:'值得购买',url:menu7},
  {text:'每日优惠',url:menu8},
  {text:'充值中心',url:menu9},
  {text:'我的客服',url:menu10}
] 


</script>

<style lang="less" scoped>
.home-grid{
  .van-image{
    width: 55%;

  }
  span {
    font-size: 12px;
  }
}
</style>